<template>
  <div class="content">
    <div class="breadcrumb" :gutter="24">
      {{$t('approve.work_order_approval')}} {{process}}
      <div class="btngroup">
        <!-- <el-button type="primary" size="small" @click="handleWoIdShow()">工单选择</el-button> -->

      </div>
    </div>

    <!-- <el-row :gutter="24">
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>工单名称</p>
            <p>{{panelObj.woId}}</p>
          </div>

        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>订单号</p>
            <p>{{panelObj.poNum}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>批次号</p>
            <p>{{panelObj.lotNum}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>工单类型</p>
            <p>{{panelObj.type == 1 ? '生产批' : panelObj.type == 2 ? '实验批' : ''}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>配方号</p>
            <p>{{panelObj.tbRecipeVo ? panelObj.tbRecipeVo.recipeName : ''}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>物料号</p>
            <p>{{panelObj.tbRecipeVo ? panelObj.tbRecipeVo.item : ''}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>数量</p>
            <p>{{panelObj.tbRecipeVo ? panelObj.tbRecipeVo.itemQty : ''}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>单位</p>
            <p>{{panelObj.tbRecipeVo ? panelObj.tbRecipeVo.uomId : ''}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>状态</p>
            <p>{{queryStatus(panelObj.stateCd)}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>开始时间</p>
            <p>{{panelObj.planStartTime}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="3" :xl="3">
        <el-card shadow="never">
          <div class="workOrder">
            <p>结束时间</p>
            <p>{{panelObj.planEndTime}}</p>
          </div>
        </el-card>
      </el-col>
    </el-row> -->
    <div class="title" style="margin-bottom:10px">{{$t('workorder.work_order_list')}}</div>
    <el-form ref="form" :model="form" label-width="70px" size="small">
      <el-row :gutter="28">
        <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
          <el-form-item :label="$t('common.keyword')">
            <el-input v-model="form.keyword" clearable placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="8" :md="10" :lg="8" :xl="6" class="titmepicker">
          <el-form-item :label="$t('common.create_time')">
            <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              :unlink-panels="true">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="9" :sm="6" :md="6" :lg="4" :xl="4">
          <el-form-item :label="$t('recipe.state')" label-width="40px">
            <el-select v-model="form.status" multiple placeholder="" clearable>
              <el-option v-for="(item,index) in statusList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <el-form-item label-width="0px">
            <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <tableList :tableData="workOrder" :pager="wordPage" @handleEdit="handleWorkOrder"></tableList>
    <div class="pagination-area">
      <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :page-sizes="[5, 10,20, 30]"
        :page-size="wordPage.pageSize" :current-page="wordPage.pageNum" layout="total, sizes, prev, pager, next, jumper"
        :total="wordPage.total">
      </el-pagination>
    </div>

    <div class="title">{{ $t("approve.approval_opinions") }}</div>
    <div style="padding:10px 0;text-align: right;">
      <!-- <el-tooltip class="item" effect="dark" content="添加意见" placement="top-start">
                <el-button icon="iconfont icon-peizhitubiaosvg-" size="mini"  @click="handleOpinion()"></el-button>
            </el-tooltip> -->
      <!-- <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
        <el-button icon="iconfont icon-yijianfankui" size="mini" :disabled="disabled || discard" @click="handleEdit()"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="撤回" placement="top-start">
        <el-button icon="iconfont icon-biaoge-chehui" :disabled="disabled" size="mini" @click="handleDel()"></el-button>
      </el-tooltip> -->

      <el-button type="primary" size="mini" :disabled="disabled || discard" @click="handleApprove(8)">{{$t('common.approval')}}</el-button>
      <el-button type="primary" size="mini" :disabled="disabled" @click="handleApprove(9)">{{$t('common.refuse')}}</el-button>
    </div>
    <div class="tableAuto">
      <el-table :data="tableData" :height="height" style="width:100%" @row-click="rowClick" border stripe
        :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" ref="refTable" highlight-current-row @sort-change='sortChange'>
        <el-table-column label="" width="35" align="center">
          <template slot-scope="scope">
            <div>
              <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div style="width:100%;overflow-x:scroll">
              <table class="table_form" border="0" cellspacing="0">
                <thead class="theads">
                  <tr>
                    <th width="50px"></th>
                    <th width="120px">序号</th>
                    <th width="120px">姓名</th>
                    <th width="120px">账户</th>
                    <th width="80px">审批</th>
                    <th width="150px">审批时间</th>
                    <!-- <th width="100px">意见</th> -->
                    <th>备注</th>
                    <th width="120px">操作</th>
                  </tr>
                </thead>
                <tbody :key="itemKey">
                  <tr v-for="(item,index) in props.row.woApproveLogVos" :key="index+'l'" @click="handleChildTr(item)">
                    <td><el-radio :label="item.fid" v-model="propsRadioId">&nbsp;</el-radio></td>
                    <td>{{rp(index+1)}}级审核人</td>
                    <td><span v-if="item.stateCd">{{item.sysUserVo ? item.sysUserVo.frealName : ''}}</span></td>
                    <td><span v-if="item.stateCd">{{item.sysUserVo ? item.sysUserVo.faccount : ''}}</span></td>
                    <td>{{queryStatus(item.stateCd)}}</td>
                    <td><span v-if="item.stateCd">{{item.actStartTimeUtc}}</span></td>

                    <td style="text-align:left">{{item.notes}}</td>
                    <td style="text-align:left">
                      <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                        <el-button icon="iconfont icon-yijianfankui" size="mini" :disabled="disabled && item.stateCd"
                          @click="handleEdit()"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="撤回" placement="top-start">
                        <el-button icon="iconfont icon-biaoge-chehui" size="mini" :disabled="disabled && item.stateCd"
                          @click="handleDel()"></el-button>
                      </el-tooltip>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

          </template>
        </el-table-column>
        <el-table-column type="index" :label="$t('common.number')" align="center" width="90">
          <template slot-scope="scope">
            {{table_index(scope.$index+1)}}
          </template>
        </el-table-column>
        <el-table-column prop="flastModifyUserId" width="130" show-overflow-tooltip :label="$t('common.full_name')" sortable='custom'>
          <template slot-scope="scope" v-if="scope.row.stateCd">
            {{scope.row.sysUserVo ? scope.row.sysUserVo.frealName : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="flastModifyUserId" width="130" show-overflow-tooltip :label="$t('common.account')" sortable='custom'>
          <template slot-scope="scope" v-if="scope.row.stateCd">
            {{scope.row.sysUserVo ? scope.row.sysUserVo.faccount : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="reasonCd" width="180" show-overflow-tooltip :label="$t('workorder.final_confirmation')" sortable='custom'>
          <template slot-scope="scope">
            {{queryStatus(scope.row.stateCd,1)}}
          </template>
        </el-table-column>
        <el-table-column prop="actStartTimeUtc" show-overflow-tooltip :label="$t('workorder.confirm_time')"
          sortable='custom'></el-table-column>
        <!-- <el-table-column prop="notes" show-overflow-tooltip label="备注"></el-table-column> -->
      </el-table>
    </div>
    <div class="pagination-area">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10,20, 30]"
        :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
      </el-pagination>
    </div>

    <!-- <el-dialog title="工单选择" :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :width="screenWidth > 1100 ? '30%' : '45%'" v-dialogDrag>
            <el-form :model="formData" label-width="85px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">
                <el-row :gutter="24">
                    <el-col :xs="24">
                        <el-form-item label="工单选择" prop="woId" class="selectItem">
                            <el-select 
                                v-model="formData.woId" 
                                remote 
                                filterable
                                :remote-method="remoteMethod"
                                placeholder="" 
                                v-el-select-loadmore="loadMoreFun" 
                                clearable
                                @change="handleSelectWoid"
                            >
								<el-option v-for="(item,index) in workOrder" :key="index" :label="item.woId" :value="item.woId"></el-option>
							</el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24">
                        <el-form-item :label="$t('recipe.formula_name')">
                            <el-input v-model="formData.recipeName" placeholder="" disabled clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24">
                        <el-form-item :label="$t('recipe.state')">
                            <el-input v-model="formData.status" placeholder="" disabled clearable></el-input>
                        </el-form-item>
                    </el-col>
                      <el-col :xs="24">
                        <el-form-item label="配方描述">
                            <el-input v-model="formData.notes" placeholder="" disabled clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="handleWoid('ruleForm')">确 认</el-button>
                <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
            </span>
        </el-dialog> -->

    <el-dialog title="添加意见" :visible.sync="dialogVisible1" :close-on-click-modal="false" :before-close="handleCloseRemarks"
      :width="screenWidth > 1100 ? '30%' : '45%'" v-dialogDrag>
      <el-form ref="form" :model="ruleForm" :rules="rulesRemar" size="small" label-width="80px" :hide-required-asterisk="true">
        <el-row :gutter="24">
          <el-col :xs="24">
            <el-form-item label="意见" prop="remarks" class="selectItem">
              <el-select v-model="ruleForm.remarks" placeholder="">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="currObj.stateCd == item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="ruleForm.notes" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :loading="loadingRemarks" @click="handleAddRemarks('form')">确 认</el-button>
        <el-button @click="handleCloseRemarks()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogVisibleEdit" :close-on-click-modal="false" :before-close="handleCloseEdit"
      :width="screenWidth > 1100 ? '30%' : '45%'" v-dialogDrag>
      <el-form ref="recordRorm" :model="recordRorm" :rules="rulesRecordr" size="small" label-width="80px" :hide-required-asterisk="true">
        <el-row :gutter="24">
          <!-- <el-col :xs="24">
                        <el-form-item label="姓名">
                            <el-input v-model="recordRorm.flastModifyUserId" disabled placeholder="" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24">
                        <el-form-item label="审批时间">
                            <el-input v-model="recordRorm.actStartTimeUtc" disabled placeholder="" clearable></el-input>
                        </el-form-item>
                    </el-col> -->
          <el-col :xs="24">
            <el-form-item label="意见" prop="stateCd" class="selectItem">
              <el-select v-model="recordRorm.stateCd" placeholder="">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="recordRorm.notes" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :loading="loadingRecord" @click="handleEditRecord('recordRorm')">确 认</el-button>
        <el-button @click="handleCloseEdit()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { scheduling } from "@/api/scheduling"
import { approvehttp } from "@/api/approve"
import tableList from "./template/tableList.vue"
export default {
  components: {
    tableList
  },
  data () {
    return {
      screenWidth: document.body.clientWidth,
      height: "calc(100vh - 500px)",
      tableData: [],
      radioId: '',
      tableLoading: false,
      dialogVisible1: false,
      woId: "",
      pager: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        field: 'creatTimeLocal',
        order: 'DESC',
      },
      wordPage: {
        pageNum: 1,
        pageSize: 5,
        keyword: ""
      },
      dialogVisible: false,
      formData: {
        woId: "",
        recipeName: "",
        status: "",
        notes: ""
      },
      workOrder: [],
      rules: {
        woId: [{ required: true, message: '请选择工单', trigger: 'change' }],
      },
      ruleForm: {
        remarks: "",
        notes: ""
      },
      rulesRemar: {
        remarks: [{ required: true, message: '请填写意见', trigger: 'change' }],
      },
      options: [{
        label: this.$t('common.approval'),
        value: "8"
      }, {
        label: this.$t('common.refuse'),
        value: "9"
      }],
      currObj: {},
      dialogVisibleEdit: false,
      loadingRemarks: false,
      recordRorm: {},
      rulesRecordr: {},
      loadingRecord: false,
      process: "",
      propsRadioId: "",
      cnum: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'],
      disabled: true,
      discard: false,
      panelObj: {},
      itemKey: 0,
      statusList: [{
        label: this.$t('workorder.newly_build'),
        value: "0"
      }, {
        label: this.$t('workorder.release'),
        value: "1"
      }, {
        label: this.$t('workorder.function'),
        value: "2"
      }, {
        label: "生产结束",
        value: "3"
      }, {
        label: this.$t('workorder.suspend'),
        value: "4"
      }, {
        label: this.$t('common.abandoned'),
        value: "5"
      }, {
        label: this.$t('common.examine'),
        value: "7"
      }, {
        label: this.$t('common.approval'),
        value: "8"
      }, {
        label: this.$t('common.refuse'),
        value: "9"
      }],
      form: {
        keyword: "",
        time: [],
        status: ['3']
      },
    }
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    },
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  created () {
    this.workOrderList()
  },
  methods: {
    handleSearch () {
      this.wordPage.pageNum = 1
      this.workOrderList()
    },
    //查询工单审批记录
    getWoApproveLogList () {
      const param = {
        size: this.pager.pageSize,
        page: this.pager.pageNum,
        woId: this.formData.woId,
        field: 'fId',
        order: this.pager.order,
      }
      this.tableLoading = true
      approvehttp.woApproveLogList(param).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
          this.dialogVisible = false
        }
      }).catch(e => {
        this.$message.error('服务器繁忙,请稍后再试');
        this.tableLoading = false
      })
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
      this.getWoApproveLogList()
    },

    handleWoIdShow () {
      this.dialogVisible = true
    },
    //获取工单
    workOrderList () {
      let startTime = ""
      let endTime = ""
      if (this.form.time && this.form.time.length > 0) {
        startTime = this.$util.format(this.form.time[0], 'YYYY-MM-DD')
      }
      if (this.form.time && this.form.time.length > 0) {
        endTime = this.$util.format(this.form.time[1], 'YYYY-MM-DD')
      }
      const param = {
        page: this.wordPage.pageNum,
        size: this.wordPage.pageSize,
        woId: this.form.keyword,
        stateCd: '',
        startTime: startTime,
        endTime: endTime,
        field: this.pager.field,
        order: this.pager.order,
        stateCds: this.form.status
      }
      // const param = {
      //     page:this.wordPage.pageNum,
      //     size:this.wordPage.pageSize,
      //     woId:this.wordPage.keyword,
      //     stateCds:[3,6,5]
      // }
      scheduling.workOrderList(param).then(res => {
        if (res.code == 200) {
          this.workOrder = res.data.rows
          this.wordPage.total = res.data.total
        }
      })
    },
    handleSizeChange1 (val) {
      this.wordPage.pageNum = 1
      this.wordPage.pageSize = val
      this.workOrderList()
    },
    handleCurrentChange1 (val) {
      this.wordPage.pageNum = val;
      this.workOrderList()
    },
    handleWorkOrder (row) {
      let item = this.workOrder.find(item => item.woId == row.radioId)
      this.formData.woId = item.woId
      this.getWoApproveLogList()
      this.$set(this, 'panelObj', item)
      this.dialogVisible = false

      if (row.row.stateCd == 5) {
        this.discard = true
      } else {
        this.discard = false
      }

      try {
        this.process = " > " + this.formData.woId + " - " + this.queryStatus(item.stateCd)
      } catch (e) { }
      this.radioId = ''
    },
    //下拉加载更多工单
    loadMoreFun () {
      this.wordPage.pageNum++
      this.workOrderList()
    },
    //远程搜索配方名称
    remoteMethod (keyword) {
      this.wordPage.keyword = keyword.trim();
      this.wordPage.pageNum = 1
      setTimeout(() => {
        this.workOrder = []
        this.workOrderList()
      }, 200)
    },
    handleSelectWoid (val) {
      const item = this.workOrder.find(el => el.woId == val)
      item.tbRecipeVo = item.tbRecipeVo ? item.tbRecipeVo : {}
      this.formData.recipeName = item.tbRecipeVo.recipeName
      this.formData.status = this.queryStatus(item.stateCd)
      this.formData.notes = item.tbRecipeVo.notes
      this.woId = val
    },
    handleWoid (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getWoApproveLogList()
          let item = this.workOrder.find(item => item.woId == this.formData.woId)
          console.log(item)
          this.$set(this, 'panelObj', item)
          this.dialogVisible = false
          try {
            this.process = " > " + this.formData.woId + " - " + this.queryStatus(item.stateCd)
          } catch (e) { }
          this.radioId = ''
        }
      });
    },
    async handleOpinion () {
      if (this.radioId === '') {
        this.$message.error('请选择添加意见的工单记录');
        return
      }
      let res = await approvehttp.getCurrWoidApproveLog(this.radioId)
      if (res.code == 200) {
        this.currObj = Object.assign({}, res.data)
        this.dialogVisible1 = true
      } else {
        this.$message.error(res.msg);
      }
    },
    rowClick (row) {
      this.radioId = row.fid
      this.$refs.refTable.toggleRowExpansion(row)
      this.$refs.refTable.setCurrentRow(row)
      if (row.stateCd) {
        this.disabled = true
      } else {
        this.disabled = false
      }

    },
    handleChildTr (row) {
      this.propsRadioId = row.fid
      const item = this.tableData.find(item => item.fid == row.preId)
      this.radioId = item.fid
      if (item.stateCd) {
        this.disabled = true
      } else {
        this.disabled = false
      }
    },
    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getWoApproveLogList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getWoApproveLogList()
    },
    handleClose () {
      this.dialogVisible = false
      this.$refs['ruleForm'].resetFields();
    },
    handleCloseRemarks () {
      this.dialogVisible1 = false
      this.$refs['form'].resetFields();
    },
    handleAddRemarks (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            woId: this.formData.woId,
            stateCd: this.ruleForm.remarks,
            actStartTimeUtc: this.$util.format(new Date().getTime()),
            notes: this.ruleForm.notes,
            preId: this.radioId,
          }
          console.log(param)
          this.loadingRemarks = true
          approvehttp.woApproveLogAdd(param).then(res => {
            this.loadingRemarks = false
            if (res.code == 200) {
              const index = this.tableData.findIndex(item => item.fid == this.radioId)
              this.$set(this.tableData[index], "woApproveLogVos", this.tableData[index].woApproveLogVos ? this.tableData[index].woApproveLogVos : [])
              this.tableData[index].woApproveLogVos.push(res.data)
              this.dialogVisible1 = false
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      });
    },
    handleApprove (type) {
      if (!this.formData.woId) {
        this.$message.error('请选择工单');
        return
      }

      let el = Object.assign({}, this.tableData.find(item => item.fid == this.radioId))
      el.stateCd = type
      el.actStartTimeUtc = this.$util.format(new Date().getTime())
      let that = this
      this.$customConfirm({
        content: `是否要${that.queryStatus(type)}此工单`,
        onok () {
          approvehttp.woApproveLogModify(el).then(res => {
            if (res.code == 200) {
              that.workOrderList()
              that.getWoApproveLogList()
              try {
                that.process = " > " + that.formData.woId + " - " + that.queryStatus(type)
              } catch (e) { }
              that.panelObj.stateCd = type
            } else {
              that.$message.error(res.msg);
            }
          }).catch(e => {
            that.loadingRecord = false
            that.$message.error('服务器繁忙,请稍后再试');
          })

        }
      });
    },
    async handleEdit () {
      if (this.radioId === '') {
        this.$message.error('请选择要编辑的工单记录');
        return
      }

      const item = this.tableData.find(item => item.fid == this.radioId) || {}
      item.woApproveLogVos = item.woApproveLogVos || []
      const el = item.woApproveLogVos.find(el => el.fid == this.propsRadioId) || {}
      console.log(el)
      this.recordRorm = Object.assign({}, el)
      this.recordRorm.stateCd = el.stateCd ? el.stateCd + '' : ''
      console.log(this.recordRorm.stateCd)
      this.dialogVisibleEdit = true
    },
    handleEditRecord () {
      this.loadingRecord = true
      approvehttp.woApproveLogModify(this.recordRorm).then(res => {
        this.loadingRecord = false
        if (res.code == 200) {
          const index = this.tableData.findIndex(items => items.fid == this.radioId)
          if (index > -1) {
            this.tableData[index].woApproveLogVos = this.tableData[index].woApproveLogVos || []
            const idx = this.tableData[index].woApproveLogVos.findIndex(el => el.fid == this.propsRadioId)
            console.log(idx)
            this.tableData[index].woApproveLogVos[idx] = this.recordRorm
            this.tableData[index].woApproveLogVos[idx].actStartTimeUtc = this.$util.format(new Date())
            console.log(this.tableData[index].woApproveLogVos[idx])
            this.tableData[index].woApproveLogVos[idx].sysUserVo = this.tableData[index].woApproveLogVos[idx].sysUserVo || {}
            this.tableData[index].woApproveLogVos[idx].sysUserVo.faccount = res.data.sysUserVo.faccount
            this.tableData[index].woApproveLogVos[idx].sysUserVo.frealName = res.data.sysUserVo.frealName
            this.itemKey = new Date().getTime()
          }

          this.dialogVisibleEdit = false
          // this.getWoApproveLogList()
        } else {
          this.$message.error(res.msg);
        }
      }).catch(e => {
        this.loadingRecord = false
        this.$message.error('服务器繁忙,请稍后再试');
      })
    },
    handleCloseEdit () {
      this.dialogVisibleEdit = false
    },
    async handleDel () {
      if (this.propsRadioId === '') {
        this.$message.error('请选择撤销的工单记录');
        return
      }
      const index = this.tableData.findIndex(item => item.fid == this.radioId)
      if (index > -1) {
        const item = this.tableData[index].woApproveLogVos || []
        const el = item.find(el => el.fid == this.propsRadioId) || {}
        console.log(el)
        el.actFinishTimeUtc = null
        el.actStartTimeUtc = null
        el.flastModifyUserId = null
        el.isWithdraw = null
        el.notes = null
        el.reasonCd = null
        el.state = 0
        el.stateCd = null
        el.sysUserVo = null
        el.type = null
        el.woApproveLogVos = null
        let that = this
        // if(res.code == 200){
        this.$customConfirm({
          content: '是否要撤销此审批记录',
          onok () {
            approvehttp.woApproveLogModify(el).then(res => {
              if (res.code == 200) {
                const idx = that.tableData[index].woApproveLogVos.findIndex(el => el.fid == that.propsRadioId)
                that.tableData[index].woApproveLogVos[idx] = el
              } else {
                that.$message.error(res.message);
              }
            })
          }
        });
      }
    },
    queryStatus (type) {
      type = parseInt(type)
      switch (type) {
        case 0:
          return this.$t('workorder.newly_build')
        case 1:
          return this.$t('workorder.release')
        case 2:
          return this.$t('workorder.function')
        case 3:
        case 6:
          return this.$t('workorder.finish')
        case 4:
          return this.$t('workorder.suspend')
        case 5:
          return this.$t('common.abandoned')
        case 7:
          return this.$t('common.examine')
        case 8:
          return this.$t('common.approval')
        case 9:
          return this.$t('common.refuse')
      }
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    rp (n) {
      var s = '';
      n = '' + n; // 数字转为字符串
      for (var i = 0; i < n.length; i++) {
        s += this.cnum[parseInt(n.charAt(i))];
      }
      return s;
    }
  }
}
</script>

<style scoped>
.btngroup {
  float: right;
}
.selectItem >>> .el-select {
  width: 100%;
}
.title {
  line-height: 35px;
  background: #3b2e58;
  color: #fff;
  padding: 0 15px;
  font-size: 14px;
}
.table_form {
  width: 100%;
  border-top: 1px solid #dedfe3;
  border-left: 1px solid #dedfe3;
}
thead {
  background: #f9f9f9;
}
thead td {
  font-weight: bold;
}
.table_form td,
.table_form th {
  border-right: 1px solid #dedfe3;
  border-bottom: 1px solid #dedfe3;
  text-align: center;
  min-width: 30px;
  padding: 6px 5px;
}
.theads th {
  background: rgb(234, 235, 236);
}
.tableAuto >>> .el-table__expanded-cell {
  padding: 0px 15px;
}
.never {
  margin-bottom: 10px;
}
.workOrder {
  text-align: center;
}
.workOrder p:first-child {
  font-weight: bold;
}
.workOrder p + p {
  color: #666;
  font-size: 14px;
  padding-top: 10px;
  height: 45px;
}
.content >>> .el-card {
  margin-bottom: 6px;
}
</style>
